import Vue from 'vue'

const app = new Vue({
  // el: '#app',
  template: '<div ref="myDiv">content:{{text}} {{obj.a}}</div>',
  data: {
    text: 0,
    obj: {}
  }
  // 这里定义的 watch a在组件销毁时 会自动注销监听
  // watch: {
  //   text: (newVal, oldVal) => {
  //     console.log(`${newVal}:${oldVal}`)
  //   }
  // }
})

app.$mount('#app')

// let i = 0
setInterval(() => {
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
  // app.obj.a = ++i
  // app.$forceUpdate()
  // app.$options.data.text += 1
  // app.$data.text += 1

  // app.$set(app.obj, 'a', ++i)
  // app.$delete(app.obj, 'a')
}, 1000)

// console.log(app.$data)
// console.log(app.$apps)
// console.log(app.$el) // 模板节点
// console.log(app.$options) // 传入的option 合并后的 app.$options.data 与 app.$data 不是同一个对象
// // vue 挂在到app实例上根节点上的的 text 和 appp.$data.text 是同一个属性；app上的属性 实际上就是代理到app.$data上的属性
// app.$options.render = (h) => {
//   return h('div', {}, 'new render function')
// }
// 下次有值变化是 render 会生效

// 都是最外层 挂在到app节点的 Vue实例
// console.log(app.$root)
// console.log(app.$root === app)
// console.log(app.$children)
// console.log(app.$slots) // 插槽
// console.log(app.$scopedSlots)
// 可以快速定位到 模板里的html节点 或组件
// 如果是html节点 就返回节点 如果是组件就返回组件实例
// console.log(app.$refs) // 模板引用
// console.log(app.$isServer) // 服务端渲染时 每个实例都可以访问

// 方法
// 监听值变化 组件内声明是一致的 需要手动注销
// const unWatch = app.$watch('text', (newVal, oldVal) => {
//   console.log(newVal)
// })
// setTimeout(() => {
//   unWatch()
// }, 2000)

// 子组件向父组件传值 非常有用
// app.$on('test', (a, b) => {
//   console.log('test emited', a, b)
// })
// app.$emit('test', 1, 2)
// 只触发一次
// app.$once('test', (a, b) => {
//   console.log('test emited', a, b)
// })
// setInterval(() => {
//   app.$emit('test', 1, 2)
// }, 1000)

// 强制让主键 重新渲染一次
// app.$forceUpdate()

// vue的渲染时异步的
// app.$nextTick(() => {

// })

// 组件中调用this 时，其实就说vue的实例
